<template>
  <div ref="graph" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
import man from '../img/man.png'
import woman from '../img/woman.png'
export default {
  name: 'graph',
  props: {
    param: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    param: {
      deep: true,
      immediate: true,
      handler: function (val) {
        if (val !== undefined) {
          this.$nextTick(() => {
            this.init(val)
          })
        }
      },
    },
  },
  mounted() {
    this.init([])
  },
  methods: {
    init(val) {
      const myChart = echarts.init(this.$refs.graph)
      console.log('val---------', val)
      var list = val
      var links = list.map(item => {
        return {
          source: list[0].name,
          target: item.name,
          relation: item.relation,
        }
      })
      var data = list.map((item, index) => {
        var size = index === 0 ? 100 : 80
        var img = ''
        img = item.sex === '男' ? 'image://' + man : 'image://' + woman
        let label = {
          normal: {
            show: true,
            position: 'insideBottom',
          },
        }
        return {
          name: item.name,
          relation: item.relation,
          sex: item.sex,
          symbol: img,
          symbolSize: size,
          draggable: true,
          category: 0,
          label: label,
        }
      })
      let option = {
        // backgroundColor: '#000e2f',
        tooltip: {
          show: false,
        },
        animationDurationUpdate: 2000,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 2000,
              edgeLength: [10, 150],
            },
            roam: true,
            data: data,
            links: links,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: 'rgba(255,221,77,0.4)',
                    },
                    {
                      offset: 0,
                      color: '#FDE16B',
                    },
                  ],
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  type: 'linear',
                  global: false,
                },
              },
            },
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#10F3FC',
                },
                formatter: function (param) {
                  return param.data.target === param.data.source
                    ? ''
                    : param.data.relation !== undefined
                    ? param.data.relation
                    : ''
                },
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style scoped></style>
